<template>
    <div class="background">
        <div class="head"> <h1 >Yihen Page</h1> </div>
        <div class="card-list">
            <YihenGlassmorphismCard
                width="35%"
                height="40%"
                fontSize="16px"
                yihenStyle="Modern"
                @click="goto('/self-introduction')"
                class="nes-pointer"
            >
                <div class="card-content">
                    <h1>个人介绍</h1>
                </div>
            </YihenGlassmorphismCard>
           

            <YihenGlassmorphismCard
                width="35%"
                height="40%"
                fontSize="16px"
                yihenStyle="Modern"
                @click="goto('/self-images')"
                class="nes-pointer"
            >
                <div class="card-content">
                    <h1>个人相册</h1>
                </div>
            </YihenGlassmorphismCard>


            <YihenGlassmorphismCard
                width="35%"
                height="40%"
                fontSize="16px"
                yihenStyle="Modern"
                @click="goto('/self-menu')"
                class="nes-pointer"
            >
                <div class="card-content">
                    <h1>个人菜单</h1>
                </div>
            </YihenGlassmorphismCard>


        </div>
    </div>
</template>

<script setup>
import {useRouter , useRoute} from 'vue-router'
import  YihenGlassmorphismCard  from '../components/card/Yihen-GlassmorphismCard.vue'

const router = useRouter()
const route = useRoute()  // 获取上层路由传递的参数

function goto(name){
    //  路由跳转
    router.push({
        path: name, // 路由
    })
}

</script>

<style  scoped>
.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 30% 30%, #5D7DB3 0%, #565879 100%);
    z-index: 0;
    overflow: auto;
}

/* 美化滚动条 */
.background::-webkit-scrollbar {
    width: 10px;
    background: rgba(0,0,0,0.05);
}
.background::-webkit-scrollbar-thumb {
    background: #7b8cc4;
    border-radius: 8px;
}
.background::-webkit-scrollbar-thumb:hover {
    background: #4e5a8a;
}

.background {
    scrollbar-width: thin;
    scrollbar-color: #7b8cc4 rgba(0,0,0,0.05);
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px 32px;
    width: 100vw;
    height: 80vh;
    max-width: 1200px;
    margin: 0 auto;
}
.card-list > * {
    flex: 0 1 340px;
    max-width: 340px;
    min-width: 280px;
    box-sizing: border-box;
}

.head {
    width: 100%;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282b5a;
    text-align: center;
}
</style>